/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    TextInput,
    ToolbarAndroid,
    TouchableHighlight,
    Alert,
    Dimensions,
} from 'react-native';

import CommonStyles from '../styles/common';
import LoadingView from '../components/loadingView';
import { UserLoginIn,CleanAuthrizatuon} from '../actions/user';
import {Actions,ActionConst} from 'react-native-router-flux';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import md5 from 'md5';
import CommonUtils from '../utils/common';
import StringEx from '../utils/stringEx';
import Toast from '../utils/toast';
import {Button} from 'antd-mobile';

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state={
            isProcessing:false,
            userName:'',
            password:'',
        };
        this.onPressLoginIn = this.onPressLoginIn.bind(this);
    }
    
    componentWillMount() { 
        
    }
    
    onPressLoginIn(){
        this.props.dispatch(CleanAuthrizatuon());
        var username=StringEx.trim(this.state.userName);
        var password = StringEx.trim(this.state.password);
        if(username.length==0||password.length==0){
            Toast.showShort('帐号密码不能为空');
            return;
        }
        this.setState({isProcessing:true});
        this.props.dispatch(UserLoginIn(encodeURIComponent(username),md5(password).toLowerCase()))
        .then(()=>{
            this.responseLoginIn();
        });
    }
    
    responseLoginIn(){
        this.setState({isProcessing:false});
        if(this.props.loginResult){
            let result = this.props.loginResult;
            if(result.result==1){
                Actions.pop();
            }
            else{
                Toast.showShort('登录失败，'+result.msg);
            }
        }
    }
    
    render() {
        if (this.state.isProcessing){
            return (<LoadingView isLoading={this.state.isProcessing} tip='登录中...'/>);
        }
          
        return (
            <View style={CommonStyles.container}>
                <ScrollView contentContainerStyle={[CommonStyles.padding10]} keyboardShouldPersistTaps={'always'}>
                    <TextInput
                        ref='username'
                        style={CommonStyles.input}
                        placeholder='邮箱/用户名' 
                        onChangeText={(text) => this.setState({userName:text})} 
                        value={this.state.userName}
                        onSubmitEditing={() => CommonUtils.focusNextInput(this,'pwd')}/>
                    <TextInput
                        ref='pwd'
                        style={CommonStyles.input}
                        placeholder='密码'
                        secureTextEntry={true} 
                        onChangeText={(text) => this.setState({password:text})} 
                        value={this.state.password}
                        onSubmitEditing={this.onPressLoginIn}/>
                    <Button type='primary' onClick={this.onPressLoginIn}>登  录</Button>
                    <View style={[styles.otherLoginView]}>
                        <Text style={styles.otherLoginText}>还可以使用其他帐号登录</Text>
                        <TouchableHighlight
                            style={styles.QQLoginBg}
                            underlayColor='#ddd'>
                            <FontAwesome name='qq' size={24} color='#fff'/>
                        </TouchableHighlight>
                    </View>               
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    otherLoginView:{
        flex:1,
        marginTop:30
    },
    otherLoginText:{
        fontSize:16,
        marginBottom:10
    },
    QQLoginBg:{
        width:40,
        height:40,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#77C1FE',
        borderWidth: 0,
        borderRadius: 20,
    }
});
